Iguana Solutions USA DevOps Platform
Web App UI/UX DESIGN
When Expertise Meets Excellence: How Our Collaboration with Iguana Solutions Transforms Complex Infrastructures
The Skins Factory was thrilled to work side-by-side with Iguana Solutions USA, a world-class managed services and hosting company that designs, creates and manages complex and critical infrastructures on physical, cloud or hybrid platforms. This collaboration brought together our deep industry knowledge of user-centered and user experience design with Iguana Solutions' unmatched technical prowess and innovation, to deliver transformative solutions for their clients facing intricate infrastructural challenges.
Login
We created a Login panel that utilizes a revolving image format. Iguane Solutions can at their discretion, add additional images, promote services or relay pertinent news or information right when the user arrives. We just got them started.
Homepage + Projects + Infrastructure
The starting point where end-users can create new projects, view existing projects, see critical information and scan the activity feed. We designed new iconography that is crisp, unified and playful. Who says DevOps has to be boring?
Homepage
Menus
Filters Expanded
To keep the UI clean, the filter dropdown is the same size as the top listview row. Once the filters are expanded, the rows each drop down one row pushing the bottom row off screen. This happens by replacement, not motion.
Projects
Blank Project: Getting Started. We utilized some neumorphic design touches to give depth to the 3 panels.
Create a Project Modal
Modal.
Project Blueprints
Configure an Infrastructure
Project: Monitoring
Monitoring information at the ready. This is the hub for an individual project that’s been deployed.
Infrastructure Grid
Our team focused on the grid layout and user experience. We needed to save space to avoid vertical or horizontal scrolling. By collapsing the sidebar, we were able to reclaim space for drag and drop icons. We also added Zoom capabilities for different views. This is especially useful for developers with large displays. Below, you can see the expanded and collapsed Sidebar.
Infrastructure Grid w/Sidebar Expanded.
Infrastructure Grid w/Sidebar Collapsed with Icons ready to be drag & dropped.
We kept the icons on a flat base by default and added neumorphic elements once they’re hovered. We wanted them to have a tactile look as they were being dragged and placed.
To help guide the drag & drop journey, we made sure to “light up” the guidemarks as an icon traverses over them. Once released, the icon and its base drops into place.
Infra Grid: Changes Modal
Infra Grid: Database Modal
Infra Grid: Deployment
Progress bars, completion percentages and text onboarding leave no room for confusion as this Infrastructure Grid goes through its deployment process.
Initial Comp Layouts
Our design team was given a low fidelity wireframe powerpoint document, which served to outline the content that needed to be represented on the screens. Below, you will find a sample of a few of the initial layouts we created.
Iguana Solutions Homepage Early Prototype 1: Light Sidebar w/ Listview Layout
Iguana Solutions Homepage Early Prototype 2: Dark Sidebar w/ Grid Layout. We felt the dark sidebar was best utilized for a complete dark mode version.
